{extend name="system@public:layout" /}
{block name="title"}上传附件{/block}
{block name="head"}
<style type="text/css">
    body {
        max-width: 1000px;
        min-width: 680px;
        margin: 0 auto;
    }

    .img-box {
        position: relative;
        width: 100%;
        height: 118px;
        overflow: hidden
    }

    .img-box .imgSrc {
        width: 100%;
        height: 100px;
        overflow: hidden;
        background: no-repeat center center;
        background-size: 100% 100%;
    }

    .selected {
        border: 2px solid #1C84C6;
        position:relative;
    }
    .selected:after{
        display:block;
        position:absolute;
        bottom:5px;
        right:0;
        content:'√';
        color:#fff;
        width:15px;
        height:15px;
        font-size:16px;
        font-weight:800;
    }
    .selected .xuanzhong{
        position:absolute;
        bottom:0;
        right:0;
        width:0;
        height:0;
        border-bottom: 30px solid #1C84C6;
        border-left: 30px solid transparent;
    }

    .info {
        margin-top: 8px;
        padding-right: 30px;
    }
    .ibox-title{padding-top:10px;padding-bottom:6px;}
</style>
{/block}
{block name="body"}
<div class="ibox">
    <div class="ibox-title">
        <div class="pull-left">
            <select class="form-control" id="groupId">
                <option value="0">未分组</option>
                {volist name="groupList" id="vo"}
                <option value="{$vo.group_id}">{$vo.group_name}</option>
                {/volist}
            </select>
        </div>
        <div class="pull-right">
            <div id="filePicker">上传附件</div>
        </div>
        <div class="pull-right">
            <div class="info"></div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="ibox-content">
        <div class="row thumbnails">
            {literal}
            <script id="fileListTpl" type="text/html">
                {{each list}}
                <div class="col-sm-2">
                    <div class="img-box">
                        <div class="imgSrc"
                             onclick="clickFile(this)"
                             file-src="{{$value.url}}"
                             file-title="{{$value.original}}"
                        >
                            <div class="icon" style="font-size:48px;text-align:center;">
                                <i class="fa fa-file"></i>
                            </div>
                            <div class="file-name">
                                <small>{{$value.original}}</small>
                            </div>
                            <div class="xuanzhong"></div>
                        </div>
                    </div>
                </div>
                {{/each}}
            </script>
            {/literal}
        </div>
        <div id="page" class="clearfix"></div>
    </div>
</div>
<div id="select-attachment" style="display:none;"></div>
{/block}
{block name="script"}
<script type="text/javascript">
    var Uploader;
    $(function () {
        $('#groupId').change(function(){
            initPage(1);
        })
        initPage(1);
        In('webuploader',function(){
            var selectType="{$Request.param.selectType}";
            var uid="{$Request.param.uid}";
            // 文件上传
            Uploader = WebUploader.create({
                auto: true,
                resize: true,
                duplicate: true,
                swf: '/public/plugins/webuploader/Uploader.swf',
                server: "/plus/uploader/index.html?uid="+uid+"&action=uploadfile",
                pick: '#filePicker',
                fileNumLimit: 10, //一次最多10个附件
                fileVal: 'upfile',
                accept: {
                    title: 'file',
                    extensions: 'rar,zip,tar,gz,7z,bz2,cab,iso,doc,docx,xls,xlsx,ppt,pptx,pdf,txt,md,xml,pem',
                    mimeTypes: '*'
                }
            });
            //上传成功后触发
            Uploader.on('uploadSuccess', function (file, response) {
                if (response.state == 'SUCCESS') { //正常上传文件
                    updateStatus();
                }
            });
            Uploader.on('uploadFinished', function () { //所有文件上传完成
                var stats = Uploader.getStats();
                initPage(1);
            })
        })
    });
    function updateStatus() {
        var text = '';
        stats = Uploader.getStats();
        text = '已成功上传' + stats.successNum + '个附件，' +
            stats.uploadFailNum + '个附件上传失败'
        $('.info').html(text);
    }
    function initPage(curr) {
        In('laypage','templete',function() {
            $.getJSON("{:url('index')}", {
                page: curr || 1,
                uid: "{$Request.param.uid}",
                selectType: "{$Request.param.selectType}",
                isOne: "{$Request.param.isOne}",
                groupId:$('#groupId').val(),
            }, function (res) {
                //显示数据
                var html = template('fileListTpl', res);
                $('.thumbnails').html(html);
                //显示分页
                laypage({
                    cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                    pages: res.totalPage, //通过后台拿到的总页数
                    curr: curr || 1, //当前页
                    jump: function (obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            initPage(obj.curr);
                        }
                    }
                });
            });
        })
    }
    //点击图片选择
    function clickFile(obj) {
        var isOne = "{$Request.param.isOne}";
        if (isOne == 1) { //单选
            $(".thumbnails .selected").removeClass('selected');
        }
        if ($(obj).hasClass('selected')) {
            $(obj).removeClass('selected');
        } else {
            $(obj).addClass('selected');
        }
        var thumbnails = $(".thumbnails .selected"); //当前选中缩略图对象
        var reVal = '';
        $.each(thumbnails, function () {
            var result = $(this).attr('file-src')+'###'+$(this).attr('file-title');
            reVal +=  result + "|";
        });
        reVal = reVal.substr(0, reVal.length - 1);
        $('#select-attachment').text(reVal);
    }
</script>
{/block}